<template>
  <div>
    <s-header :name="'秒杀'" :back="'/home'"></s-header>

    <div class="goods-item center">
      <div class="main center" id="seckill-list">
        <div v-if="state.list.length" class="seckill-grid">
          <div
              v-for="seckill in state.list"
              :key="seckill.seckillId"
              class="item-card-frame"
              @click="gotoSeckillDetail(seckill.seckillId)"
          >
            <div class="item-card">
              <img :src="seckill.goodsCoverImg" :alt="seckill.goodsName"/>
            </div>
            <div class="item-details">
              <div class="item-brand">{{ seckill.goodsName }}</div>

              <div class="item-sub-intro">
                <span>秒杀时间</span>
                <span class="start-time">{{ seckill.seckillBeginTime }}</span>
                <span class="time-separator">到</span>
                <span class="end-time">{{ seckill.seckillEndTime }}</span>
              </div>
              <div class="seckill-price">
                <span class="current-price">{{ seckill.seckillPrice }}</span>
                <del class="original-price">{{ seckill.sellingPrice }}</del>
                <button class="btn-danger">立即抢购</button>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no-content">
          <img src="@/assets/images/null-content.png" alt="No content"/>
        </div>


      </div>
    </div>
  </div>

</template>

<script setup>
import sHeader from '@/components/SimpleHeader.vue'
import {reactive, onMounted, nextTick} from 'vue';
import {getSecKillListApi} from "@/service/sec-kill";

import {useRouter} from "vue-router";

const router = useRouter()
const state = reactive({
  status: '',
  loading: false,
  finished: false,
  refreshing: false,
  list: [],
  page: 1,
  totalPage: 0
})

onMounted(() => {
  getSecKillList()
})

const getSecKillList = async () => {
  const {data} = await getSecKillListApi()
  console.log(data)
  state.list = state.list.concat(data)
  // state.totalPage = data.totalPage
  // state.loading = false;
  // if (state.page >= data.totalPage) state.finished = true
}
const gotoSeckillDetail = (seckillId) => {
  router.push(`/seckill/info/${seckillId}`);
};
</script>

<style scoped>
.seckill-title {
  text-align: center;
  margin: 20px 0;
}

.seckill-img {
  max-width: 100%;
  height: auto;
}

.goods-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.seckill-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.item-card-frame {
  flex: 1 1 36%;
  margin: 10px;
  max-width: 46%;
  box-sizing: border-box;
  cursor: pointer;
  width: 200px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.item-card-frame:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.item-card img {
  width: 100%;
  height: auto;
}

.item-details {
  padding: 10px;
  text-align: center;
}

.item-brand {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}



.seckill-price {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.current-price {
  font-size: 18px;
  font-weight: bold;
  color: #e91e63;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-top: 5px;
}

.btn-danger {
  margin-top: 10px;
  background-color: #e91e63;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-danger:hover {
  background-color: #d81b60;
}
.item-sub-intro {
  font-size: 0.37333rem;
  color: #555;
  background-color: #f9f9f9;
  padding: 0.26667rem;
  border-radius: 0.10667rem;
  margin-top: 0.26667rem;
  margin-bottom: 0.26667rem;
  box-shadow: 0 0.05333rem 0.10667rem rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.start-time,
.end-time {
  font-weight: bold;
  color:#e20000;
  margin: 0 5px; /* Add some space between time elements */
}

.time-separator {
  font-weight: bold; /* Make the separator bold for emphasis */
}
.clear {
  clear: both;
}

.no-content {
  margin-top: 16px;
  padding: 16px 20px;
  text-align: center;
}

.no-content img {
  max-width: 100%;
  height: auto;
}
</style>